<template>
<div>       <el-form :inline="true" :model="show.formInline" class="demo-form-inline">
            <el-form-item label="登录账号">
                <el-input size="small" v-model="show.formInline.user" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <!-- <el-form-item label="登录状态">
                <el-select size="small" v-model="show.formInline.condition" placeholder="请选择">
                <el-option label="开启" value="1"></el-option>
                <el-option label="关闭" value="2"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button @click="search" type="warning" size="small" icon="el-icon-search">查 询</el-button>
                <el-button @click="Add" type="primary" icon="el-icon-plus" size="small">新 增</el-button>
            </el-form-item>
        </el-form>
    <el-table fit border :data="userinfo.list" v-loading="listLoading" style="width: 100%">
        <el-table-column align="center" type="index" label="编号" width="50">
         <template slot-scope="scope">
            {{userinfo.pageNumber!==1?scope.$index+1 +  userinfo.pageSize * (userinfo.pageNumber-1):scope.$index +  userinfo.pageNumber}}
            </template>
        </el-table-column>
        <el-table-column align="center" label="登录账号">
            <template slot-scope="scope">
                {{scope.row.username}}
            </template>
        </el-table-column>
        <el-table-column prop="area" label="地区">
        </el-table-column>
        
        <el-table-column prop="create_time" label="注册时间">
          <template slot-scope="scope">
                <span>{{scope.row.create_time}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="update_time" label="更新时间">
          <template slot-scope="scope">
             <span>{{scope.row.update_time==null?'暂无更改':scope.row.update_time}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250" >
            <template slot-scope="scope">
                <el-button @click.native="Edit(scope.$index)" size="mini" icon="el-icon-edit" type="primary">编辑</el-button>
                <el-button @click="del(scope.$index)" size="mini" icon="el-icon-delete" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- <infoDialog :show="show"></infoDialog> -->
     <el-dialog :visible.sync="show.centerDialogVisible"  :before-close="handleClose" center :title="!show.title?titleAdd:titleUpdate" width="40%">
        <el-form  label-position="right" label-width="180px" :model="updateinfo" :rules="rules" ref="updateinfo">
            <el-form-item label="登录账号:" prop="username">
                <el-input class="Iwidth" v-model="updateinfo.username"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input class="Iwidth"  type='password' v-model="updateinfo.password"></el-input>
            </el-form-item>
        </el-form><span slot="footer" class="dialog-footer">
            <el-button @click="show.centerDialogVisible = false" size="mini">取 消</el-button>
            <el-button v-show="show.showUpdate" @click="Update(1)" size="mini" type="primary">修 改</el-button>
            <el-button v-show="!show.showUpdate" @click="Update(2)" size="mini" type="primary">保 存</el-button>
        </span>
    </el-dialog>
    <div  style="float:right;margin:10px 0;">
    <el-pagination  @current-change="handleCurrentChange" :current-page.sync="userinfo.pageNumber" :page-size="userinfo.pageSize" layout="total, prev, pager, next, jumper" :total="userinfo.totalRow">
    </el-pagination>
</div>
</div>
</template>
<script>
import {
  getList,
  edit,
  updateApi,
  // add,
  del,
  query,
  getPageList
} from '@/api/table'
// import infoDialog from './Dialog'
// import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      listLoading: false,
      centerDialogVisible: false,
      newInfo: {},
      titleAdd: '添加用户',
      titleUpdate: '修改用户信息',
      info: {},
      status: '',
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        department: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // password: [{ required: true, message: '不能为空', trigger: 'blur' }],
        username: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      userinfo: {},
      show: {
        centerDialogVisible: false,
        showUpdate: false,
        title: false,
        formInline: {
          user: '',
          condition: ''
        }
      },
      updateinfo: {}
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    search() {
      var p = {
        username: this.show.formInline.user,
        // status: this.show.formInline.condition,
        curr: this.userinfo.pageNumber
      }
      query(p).then(res => {
        this.userinfo = res.content
      })
    },
    select() {
      this.updateinfo.status = this.status
    },
    Add() {
      this.updateinfo = {}
      this.status = ''
      this.show.centerDialogVisible = true
      this.show.showUpdate = false
    },
    handleClose(done) {
      this.updateinfo = {}
      done()
    },
    Update(i) {
      // console.log(i); // 修改按钮
      // console.log("‘·······"); // 修改按钮
      this.$refs.updateinfo.validate(valid => {
        if (valid) {
          if (i === 1) {
            // console.log(i)// 修改按钮
            // console.log('this.updateinfo')
            // console.log(this.updateinfo)
            var a = {
              'user.id': this.updateinfo.id,
              'user.name': this.updateinfo.name,
              'user.username': this.updateinfo.username,
              'user.password': this.updateinfo.password
            }
            updateApi(a).then(() => {
              getPageList(this.userinfo.pageNumber).then(res => {
                this.userinfo = {}
                this.userinfo = res.content
                this.$message({
                  message: '恭喜你，修改成功！！！',
                  type: 'success'
                })
                this.show.centerDialogVisible = false
              })
            })
          } else if (i === 2) {
            // console.log(i)// 保存按钮
            var a = {
              'user.name': this.updateinfo.name,
              'user.username': this.updateinfo.username,
              'user.password': this.updateinfo.password
            }
            updateApi(a).then(() => {
              getPageList(this.userinfo.pageNumber).then(res => {
                this.userinfo = {}
                this.userinfo = res.content
                this.$message({
                  message: '恭喜你，保存成功！！！',
                  type: 'success'
                })
                this.show.centerDialogVisible = false
                this.search()
              })
            })
          }
        }
      })
    },
    del(index) {
      // 根据id删除用户
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // console.log(0);
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // console.log(this.userinfo.list[index]);
          del(this.userinfo.list[index].id).then(res => {
            this.userinfo.list.splice(index, 1)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    Edit(index) {
      // 根据id修改用户信息
      this.show.centerDialogVisible = true
      this.show.showUpdate = true
      edit(this.userinfo.list[index].id).then(res => {
        this.updateinfo = res.content
        this.updateinfo.password = ''
        if (this.updateinfo.status === 1) {
          this.status = '开启'
        } else if (this.updateinfo.status === 2) {
          this.status = '关闭'
        }
      })
    },
    getUserInfo() {
      // 获取用户列表
      this.listLoading = true
      getList().then(res => {
        this.userinfo = res.content
        this.listLoading = false
      })
    },
    handleCurrentChange(val) {
      getPageList(
        this.show.formInline.user,
        this.show.formInline.condition,
        val
      ).then(res => {
        this.userinfo = {}
        this.userinfo = res.content
      })
    }
  }
}
</script>
<style scoped>

</style>
